﻿<!DOCTYPE html>
@{
    Layout = null;
    if (false)
    {
        <script src="~/LiberUI/Scripts/jquery.js"></script>
        <script src="~/LiberUI/Scripts/jquery.ba-resize.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.Base.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.Controllers.js"></script>
        <script src="~/LiberUI/Scripts/LiberUI.Action.js"></script>
    }
}
<html>
<head>
    <meta name="viewport" content="width=device-width" charset="utf-8"/>
    <title>@ViewBag.UserName 的工作周报</title>
</head>
<body>
    <style type="text/css">
   #ReportPage {
      padding-top: 20px;
      width: 100%;
      background-color: white; }
        
h4{
    font: 18px "Lucida Sans Unicode","Lucida Grande",Arial,'Microsoft YaHei',SimHei;
    vertical-align: middle;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight:normal;
    margin:0;
}

h5{
    font: 14px "Lucida Sans Unicode","Lucida Grande",Arial,'Microsoft YaHei',SimHei;
    vertical-align: middle;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-weight:bold;
    margin:0;
}

    div {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #Table {
    }

    #txbSeasonCP{
        height:100px;
    }
    .btnAddRow{
        position:absolute;
        right:10px;
        top:-30px;
    }
    .Row {
      min-height: 40px;
      width:100%;
      line-height: 40px;
      height:40px;
      border-bottom: 1px solid black;
      border-top: 1px solid black;
      position: relative; 
    }
    .Row thead{
        height:30px;
        text-align:center;
        background-color:#63dddd;
    }
    .Row tr{
        height:30px;
        width:100%;
        font-size:16px;
        line-height:20px;
    }

    #Table td{
        min-width:10%;
        border:1px solid gray;
        vertical-align:central;
    }

    .dateGroup td{
        border-right:none;
    }

    .RowActions{
        position:absolute;
    }
    .RowActions>a{
        background-color:#d7d5d5;
        color:white;
        padding:5px;
    }
    .RowActions>a:hover{
        color:#3b81ba;
    }
    .editble {
      cursor: pointer;
      padding:5px;
      max-width:100%;
      height:100%;
    }

    .placeholder {
      width: 100%;
      margin: auto;
      text-align: center;
      vertical-align: middle; }

    .Title {
      clear: left;
      line-height: 40px;
      background-color: #efebeb; }
    </style>

    <table id="ReportPage" cellspacing="0" border="1" cellpadding="0">
        <tbody>
            <tr>
                <td>
                    <h4>各位好，@ViewBag.UserName 本周工作报告如下，谢谢!</h4>
                    <br />
                    <h5>日期：@ViewBag.StartDate - @ViewBag.EndDate</h5>
                    <div id="Table">
                        <h5 class="Row Title">1.季度重点工作:</h5>
                        <div class="Row editble" contenteditable="true" id="txbSeasonCP">
                        </div>
                        <h5 class="Row Title">2.月度重点工作:</h5>
                        <table class="Row" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <td width="15%">客户</td>
                                    <td width="30%">工作事项</td>
                                    <td width="150px">完成期限</td>
                                    <td>完成情况</td>
                                </tr>
                            </thead>
                            <tbody id="lstMonthPlan">
                                <tr>
                                    <td>
                                        <div class="editble" contenteditable="true">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="editble" contenteditable="true">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="editble" contenteditable="true">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="editble" contenteditable="true">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <h5 class="Row Title">3.本周工作进度:</h5>
                        <table class="Row" rules="rows" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <td width="100px">日期</td>
                                    <td width="30%">工作项</td>
                                    <td width="60px">完成否</td>
                                    <td>完成情况</td>
                                </tr>
                            </thead>
                            <tbody id="lstMyTasks">
                                <tr>
                                    <td style="text-align:center"></td>
                                    <td>
                                        <div contenteditable="true" class="editble">
                                        </div>
                                    </td>
                                    <td style="text-align:center">
                                        <div contenteditable="true" class="editble">
                                        </div>
                                    </td>
                                    <td style="text-align:left">
                                        <div contenteditable="true" class="editble">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <h5 class="Row Title">4.工作心得:</h5>
                        <div class="Row editble" id="txbGained" contenteditable="true">
                        </div>
                        <h5 class="Row Title">5.下周工作计划:</h5>
                        <table class="Row" cellspacing="0" border="0">
                            <thead>
                                <tr>
                                    <td width="100px">日期</td>
                                    <td width="50%">工作内容</td>
                                    <td>预期目标和完成标志</td>
                                </tr>
                            </thead>
                            <tbody id="lstPlanDo">
                                <tr>
                                    <td style="text-align:center">

                                    </td>
                                    <td style="vertical-align:middle">
                                        <div class="editble" contenteditable="true">

                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        function showRowActions(ev) {
            var r = $(this);
            Env.CRow = r;
            var pos = r.offset();
            if (!Env.rowAction) {
                Env.rowAction = $("<div>").addClass('RowActions');
                Env.rowAction.append($("<a>").text('插入新行').on('click', addRow))
                             .append($("<a>").text('删除').on('click', delRow))
                             .appendTo($("body"));
            }
            pos.left = pos.left + r.width() - Env.rowAction.width() - 5;
            pos.top = pos.top + r.height() - Env.rowAction.height()-5;

            Env.rowAction.offset(pos).show();
        };

        function addRow() {
            if (Env.CRow) {
                var ntr = Env.CRow.clone();
                var editbox = ntr.children('td').children('.editble').text('');
                ntr.insertAfter(Env.CRow);
                ntr.on('mousemove', showRowActions);
                editbox.eq(0).focus();
            }
        };

        function delRow() {
            if (Env.CRow) {
                var tbl = Env.CRow.parent('tbody');
                if (tbl.children('tr').length < 1) {
                    alert('这是表格中的最后一行了，请手下留情吧');
                    return;
                }
                Env.CRow.remove();
            }
        };

        function hideRowActions() {
            if (Env.rowAction) {
                Env.rowAction.hide();
            }
        }

        $(function () {
            Env.lstMonthPlan = $("#lstMonthPlan");
            Env.lstTasks = $("#lstMyTasks");
            Env.lstPlanDo = $("#lstPlanDo");

            try{
                var ts = '@ViewBag.Tasks'.ToJSON();
                var cDate = null;
                var NO = 0;
                for (var i = 0; i < ts.length; i++) {         
                    if (cDate == null || cDate != ts[i].Date) {
                        //当日期不一致时，添加新的日期分组
                        cDate = ts[i].Date;
                        var nr = Env.lstTasks.children('tr').first().clone().addClass('dateGroup');
                        Env.lstTasks.append(nr);
                        var cells = nr.children('td');
                        cells.eq(0).text(cDate);
                        cells.eq(2).remove();
                        cells.eq(3).remove();
                        cells.eq(1).attr('colspan', 3).html('');
                        NO = 1;
                    }
                    //否则，日期单元格留空
                    var nr = Env.lstTasks.children('tr').first().clone();
                    Env.lstTasks.append(nr);
                    var cells = nr.children('td');
                    
                    cells.eq(1).children('div').text(NO+'.'+ts[i].Content);
                    cells.eq(2).children('div').text(ts[i].Status == 'Completed' ? '完成' : '-');
                    NO += 1;
                }
                Env.lstTasks.children('tr').first().remove();
            }
            catch(ex){

            }

            try {
                var tds = Env.lstPlanDo.children('tr').eq(0).children('td');
                var todo = '@ViewBag.PlanTodo'.ToJSON();
                //将下周的日期分行插入
                var nStart = new Date('@ViewBag.NxtStart');
                var nEnd = new Date('@ViewBag.NxtEnd');
                for (var i = nStart; nEnd.Betten(i).Days >= 0; i.setDate(i.getDate() + 1)) {
                    tds.eq(0).append($("<h5>").text(i.toLocaleDateString()));
                }
            }
            catch (ex) {
                console.log(ex);
            }
            Env.lstMonthPlan.children('tr').on('mousemove', showRowActions);
            Env.lstTasks.children('tr').on('mousemove', showRowActions);
            Env.lstPlanDo.children('tr').on('mousemove', showRowActions);
            Env.scl.on('scrolling', hideRowActions);
        })
    </script>
</body>
</html>
